<template>
    <div>
        <div class="steps-container">
            <div class="button-container">
                <el-button @click="prev" type="success" icon="el-icon-arrow-left" circle></el-button>
                <el-button @click="next" type="success" icon="el-icon-arrow-right" circle></el-button>
            </div>
            <el-steps :active="active" finish-status="success">
                <el-step title="选择目标"></el-step>
                <el-step class="last-step" title="配置任务"></el-step>
            </el-steps>
        </div>
        <JSCron ref="jsCron" :jobCron="job" v-show="active == 2" />
        <PublishJobSource ref="jobSource" :jobSource="source" v-show="active == 1" />
    </div>
</template>

<style lang="scss">
.steps-container {
    display: relative;
    width: 100%;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 10px;
}

.button-container {
    position: absolute;
    z-index: 9;
    left: 50%;
    transform: translate(-50%, -8%);
}

.last-step {
    .el-step__title {
        margin-left: -40px !important;
    }
}
</style>

<script>
import { UsageScope } from "@/entities/Constant"

//引入组件
import JSCron from "@/components/Common/JSCron"
import PublishJobSource from "@/views/media/publish/publishJobSource"

export default {
    name: "PublishSetJob",
    props: {
        jobObj: {
            type: Object,
            default: () => {
                return {
                    id: 0,
                    source: "{}",
                    job: "{}",
                    status: 1,
                    enable: 1,
                }
            }
        },
        usageScope: {
            type: Number,
            default: UsageScope.Publisher
        }
    },
    data() {
        return {
            active: 1,
            job: this.getJob(),
            source: this.getSource(),
        }
    },
    components: {
        JSCron,
        PublishJobSource,
    },
    methods: {
        getSource() {
            if (this.jobObj && this.jobObj.source) {
                return this.jobObj.source
            }
            return "{}"
        },
        getJob() {
            if (this.jobObj && this.jobObj.job) {
                return this.jobObj.job
            }
            return "{}"
        },
        //上一步
        prev() {
            if (this.active <= 1) {
                this.active = 1;
            } else {
                this.active = this.active - 1
            }
            this.$emit("handleActive", this.active)
        },
        next() {
            //下一步
            if (this.active >= 2) {
                this.active = 2
            } else {
                this.active = this.active + 1
            }
            this.$emit("handleActive", this.active)
        },
        handleSave(fn) {
            let jobSource = this.$refs.jobSource
            let sourceJob = {
                id: this.jobObj.id,
                source: { specific: jobSource.specific, whereDict: jobSource.whereDict },
                job: this.$refs.jsCron.form,
                enable: this.jobObj.enable,
                status: this.jobObj.status,
                usageScope: this.usageScope
            }
            if (fn) fn(sourceJob)
        }
    }
}
</script>